<script lang="ts" setup>
import { onMounted, ref, watch } from 'vue'
import { TrainingListRequest, getDictType, getTrainingList } from '../../api/training';

const search = ref('')

const tabs = ref([
	{ id: 0, name: '全部培训' },
	{ id: 1, name: '进行中' },
	{ id: 2, name: '已完成' },
]);
const currentTab = ref(0);

const typeIndex = ref(0);

const myQuery = ref<TrainingListRequest>({
	trainingTitle: '',
	trainingType: '',
	trainingStatus: '',
})
const trainingTypeLi = ref([])
const trainingList = ref([])

getDictType('px_type').then((res) => {
	trainingTypeLi.value = res.data.map((it) => {
		return { id: it.dictValue, name: it.dictLabel }
	})
	trainingTypeLi.value.unshift({ id: 10, name: '全部类型' })
})

watch(typeIndex, (newVal) => {
	myQuery.value.trainingType = trainingTypeLi.value[Number(newVal)].id === 10 ? '' : trainingTypeLi.value[Number(newVal)].id
})

function handleClickTab(e: { id: number, name: string }) {
	currentTab.value = e.id
	myQuery.value.trainingStatus = e.id === 0 ? '' : e.id as 1 | 2 | 3
}

function onSearch() {
	myQuery.value.trainingTitle = search.value
}
</script>

<template>
	<view class="page">
		<view class="header">
			<uni-easyinput type="text" v-model="search" placeholder="搜索培训" prefixIcon="search" confirmType="search"
				v-bind="uni.$easyinput_attrs" @confirm="onSearch" @clear="onSearch" />
			<view class="select">
				<view class="T_tabs">
					<view v-for="item in tabs" :key="item.id" :class="{ 'T_tabs-active': currentTab === item.id }"
						@click="handleClickTab(item)">
						{{ item.name }}</view>
				</view>
				<picker @change="typeIndex = $event.detail.value" :value="typeIndex" :range="trainingTypeLi" range-key="name">
					<view class="type">
						<text>{{ trainingTypeLi[typeIndex]?.name }}</text>
						<uni-icons type="down" :size="uni.$rpxToPx(24)" color="#000" />
					</view>
				</picker>
			</view>
		</view>
		<load-list class="load-list" :api="getTrainingList" :params="myQuery" v-model="trainingList">
			<view class="list">
				<view class="item" v-for="item in trainingList" :key="item.id"
					@click="uni.navigateTo({ url: `/pages/trainingDetail/index?id=${item.id}` })">
					<view class="header">
						<text class="title">{{ item.trainingTitle }}</text>
						<uni-tag :text="item.trainingProgress === 100 ? '已完成' : item.trainingProgress > 1 ? '进行中' : '待开始'"
							size="small"
							:type="item.trainingProgress === 100 ? 'success' : item.trainingProgress > 1 ? 'warning' : 'default'" />
					</view>
					<view class="info">
						<view class="time">
							<image src="/static/svg/time-full.svg" />
							<text>{{ item.startTime }}~{{ item.endTime }}</text>
						</view>
						<view class="tag">
							<image src="/static/svg/tag.svg" />
							<view>
								<dict-label dict="px_type" :value="item.trainingType" />
							</view>
						</view>
						<view class="progress">
							<progress :percent="item.trainingProgress" show-info border-radius="10rpx" stroke-width="10rpx"
								activeColor="#3B82F6" font-size="24rpx" />
							<uni-icons type="right" :size="uni.$rpxToPx(30)" color="#D1D5DB" />
						</view>
					</view>
				</view>
			</view>
		</load-list>
	</view>
</template>

<style lang="scss" scoped>
.page:deep() {
	.uni-easyinput__content {
		border-radius: 70rpx;
		background: #f5f5ff !important;
	}

	.uni-easyinput__content-input {
		height: 70rpx;
		padding-left: 0 !important;
		font-size: 25rpx;
	}

	.content-clear-icon {
		padding: 0 28rpx;
	}
}

.load-list {
	background-color: #f8f8f8;
}

.page {
	height: 100%;
	display: grid;
	grid-template-rows: auto 1fr;

	>.header {
		padding: 20rpx 30rpx 0;

		>.select {
			display: flex;
			align-items: center;
			justify-content: space-between;

			>.T_tabs {
				justify-content: flex-start;
			}

			.type {
				font-size: 24rpx;
				color: #000;
				display: flex;
				align-items: center;
				gap: 10rpx;
			}
		}
	}

	.list {
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		gap: 20rpx;

		>.item {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 30rpx;

			image {
				width: 24rpx;
				height: 24rpx;
			}

			>.header {
				display: grid;
				grid-template-columns: 1fr auto;
				gap: 20rpx;

				>.title {
					color: #1f2937;
				}
			}

			>.info {
				margin-top: 30rpx;
				color: #6b7280;
				font-size: 24rpx;

				>view {
					display: flex;
					align-items: center;
					gap: 14rpx;
					margin-top: 20rpx;
				}

				>.progress {
					justify-content: space-between;

					>progress {
						width: 70%;
					}
				}
			}
		}
	}
}
</style>
